<template>
  <div class="passSet">
  	<login-title></login-title>
  	<div class="inner">
  		<div class="titles">
  			新用户密码设置
  		</div>
  		<el-form :model="passwordForm" class="form" :rules="rules" ref="passwordForm">
				<el-form-item  prop="passworld">
					<el-input @change="changePsw" minlength="6" maxlength="18" v-model.trim="passwordForm.passworld" type="password" placeholder="新密码输入"  style="margin-top: 32px;"></el-input>
				</el-form-item>
				<el-form-item prop="repeatpass">
					<el-input @change="changePsw" minlength="6" maxlength="18" class="repeatpass" type="password" v-model.trim="passwordForm.repeatpass"  placeholder="再次输入新密码"></el-input>
				</el-form-item>
			</el-form>
  		<!-- <el-input v-model="passworld" type="password" placeholder="新密码输入" style="margin-top: 32px;"></el-input>
  		<el-input class="repeatpass" type="password" v-model="repeatpass" placeholder="再次输入新密码"></el-input> -->
  		<p class="error" v-show="errorStatus">两次密码输入不一致！</p>
  		<el-button style='width: 100%;margin-top: 41px;' :disabled="disabled" @click="submitPass" type="primary">提交</el-button>
  	</div>
  </div>
</template>
<script>
	import loginTitle from './view/logoDiv'
  import {changePassworld} from "../api/getData"
export default {
  name: 'passSet',
  data: function () {
	var validatePass = (rule, value, callback) => {
		if (value === '') {
			callback(new Error('请再次输入密码'));
		} else if (value !== this.passwordForm.passworld) {
			callback(new Error('两次输入密码不一致!'));
		} else {
			callback();
		}
	}
    return {
		passwordForm:{
			passworld:"",
			repeatpass:"",
		},
		rules:{
			passworld:[
				{ required: true, message: '密码不能为空', trigger: 'blur' },
				{ min: 6, max: 18, message: '密码长度在 6 到 18 个字符', trigger: ['blur','change'] }
			],
			repeatpass: [
				{ validator: validatePass, trigger: 'blur' },
				{ required: true,message: '密码不能为空', trigger: 'blur' }
			]
		},
    	errorStatus:false,
		disabled:true
    }
  },
  components:{
  	loginTitle
  },
  created: function () {}, // 创建时
  beforeMount: function () {}, // 挂载之前
  mounted: function () {}, // 挂载之后
  beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
  updated: function () {}, // 数据更新后,渲染后调用(禁止)
  beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
  destroyed: function () {}, // 实例销毁后调用
  methods: {
	changePsw(e){
		if (this.passwordForm.passworld.length >= 6 && this.passwordForm.repeatpass >= 6 && this.passwordForm.passworld ===
			this.passwordForm.repeatpass) {
			this.disabled = false
		} else {
			this.disabled = true
		}
	},
    submitPass(){
      if(this.passwordForm.passworld !== this.passwordForm.repeatpass && this.passwordForm.passworld.length<6 && this.passwordForm.repeatpass.length<6 ){
        this.disabled = true
		return false
      }else{
        this.disabled = false
        changePassworld({
          "password":this.passwordForm.repeatpass
        }).then((data)=>{
          let $data = data.data
          if($data.code === 0){
            this.$message({
              tpye:"success",
              message:"密码修改成功"
            })
            this.$router.push("/")
          }else if ($data.code === 1){
              this.$message.error("密码修改失败")
          }
        })
      }
    }
  } // 函数
}
</script>
<style lang='scss'>
  .passSet{
  	position: relative;
  	width: 100vw;
  	height: 100vh;
  	background:  url(../assets/img/password-bg.jpg) 0 0 no-repeat;
  	background-size: 100% 100%;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	.inner{
  		display:flex;
  		flex-direction: column;
  		justify-content: center;
  		align-items: center;
			width: 25%;
  		margin-right: 10%;
			
  		.titles{
  			font-size: 18px;
				color: #333437;
				font-weight: bold;
				text-align: center;
  		}
			.form{
				width: 100%;
				.el-form-item {
					margin-bottom: 0;
				}
			}
  		.shuoming{
  			font-size: 14px;
				color: #333437;
				margin: 32px 0 12px 0;
  		}
  		.el-input{

  			.el-input__inner{
  				width: 100%;
  				height: 40px;
  				line-height: 40px;
  				box-sizing: border-box;

  			}
  		}
  		.repeatpass{
  			margin: 24px 0 12px 0;
  		}

  		.error{
  			font-size: 12px;
				color: #D94356;


  		}
  	}
  }
</style>
